<template>
  <div class="home-Song">
    <!-- <audio :src="url" controls></audio> -->
    <aplayer :music="{ ...audio }" :showlrc="true" v-if="audio.url">

    </aplayer>
    
  </div>
</template>

<script>
import aplayer from "vue-aplayer";
export default {
  components: {
    aplayer,
  },
  data() {
    return {
      audio: {
        title: "", // 歌曲名字
        artist: "", // 演唱者
        url: "", // 音频文件url
        pic: "", //演唱者封面
        lrc: "", //歌词或者歌词文件
        theme: "", //歌词主题
      },
      
    };
  },
  created() {
    this.getSong();
    this.getLyric();
    this.getTitle();
  },
  methods: {
    getSong() {
      this.$request("get", "/song/url/v1?id=2026224214&level=exhigh").then(
        (res) => {
          console.log(res);
          // this.url = res.data[0].url;
          this.audio.url = res.data[0].url;
        }
      );
    },
    getLyric() {
      this.$request("get", "/lyric/new?id=2026224214").then((res) => {
        console.log(res);
        this.audio.lrc = res.lrc.lyric;
      });
    },
    getTitle() {
      this.$request("get", "/song/detail?ids=2026224214").then(
        (res) => {
        console.log(res);
        this.audio.title = res.songs[0].name;
        this.audio.pic = res.songs[0].al.picUrl;
        this.audio.artist = res.songs[0].ar[0].name;
      });
    },
  },
};
</script>

<style scoped>
.home-Song{
  margin-top: 50%;

}
</style>